<template>
	<div class="blogContentRight">
        <div class="recommend">
            <p>本站推荐</p>
            <ul>
            	<li v-for="item in blogAriticleItem">
                <router-link :to="{path:'blogType/blogTypeList/'+item._id}">
                		<p>
                			<img :src="item.coverImg">
                		</p>
                		<div class="recommend-li">
                         <p>{{item.blogTitle}}</p>
                         <div class="item-text">
                             {{item.blogText}}
                         </div>
                         <div class="good">
                             <span class="good-number"><img src="../assets/images/good.png">0</span>
                             <span></span>
                         </div>
                		</div>
                  </router-link>
            	</li>

            </ul>
        </div>
       
       <div class="about-blog">
       	  <p>关于本站</p>
          <div class="my">
              <div class="myBg">
                  <img src="../assets/images/myBg.jpg">
              </div>
              <div class="my-imformation">
                   <p class="avatar"><img src="../assets/images/avatar.jpg"></p>
                   <div class="blog-title">
                   	   <p>网站宗旨</p>
                   	   <div class="blog-title-text">
                            把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
                   	   </div>
         
                   </div>
              </div>

          </div>
       </div>

       <div class="hot">
           <p>热门</p>
           <ul class="hotUl">
           	  <li>
           	  	<span class="hotNumber">1</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>

           	  <li>
           	  	<span class="hotNumber">2</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>

           	  <li>
           	  	<span class="hotNumber">3</span>
           	  	<span class="hotText">网站点滴：半年时间）</span>
           	  </li>

           	   <li>
           	  	<span class="hotNumber">2</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>

           	  <li>
           	  	<span class="hotNumber">3</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>

           	   <li>
           	  	<span class="hotNumber">2</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>

           	  <li>
           	  	<span class="hotNumber">3</span>
           	  	<span class="hotText">网站点滴：半年时间，网站权重升为权重1（纪念）</span>
           	  </li>


           </ul>
       </div>

    </div>
</template>
<style scoped>
   .blog-title>a>p{
   	   font-size: 15px;
	     font-weight: 700;
	     text-align: center;
	     padding: 10px 0 0;
   }
   .recommend li>a{
     display: block;
     display: flex;
     padding: 16px;
   }
   .my-imformation{
      	margin-top: -40px
   }
   .blog-title-text{
   	   padding: 0 16px;
   	   text-align: left;
   	   line-height: 26px;
   	   margin-top: 10px;
   	   padding-bottom: 20px;
   }

    .avatar img{
    	width: 80px;
    	height:80px;
    	border-radius: 100%
    }
	.blogContentRight{
		width: 28%;
		margin-left: 1.2%
	}
	.recommend{
	    background: #fff;
	    margin-left: 2%;
	    border: 1px solid #ddd;
	    border-radius: 2px;
	    box-shadow: 0 1px 1px rgba(0,0,0,.04);
	}
  .recommend>p{
    padding: 6px 10px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    background: #fbfafa
  }
	.recommend li>a>p{
		text-align: left;
	    padding: 6px 5px;
	    font-weight: bold;
	}
	.recommend ul li{
	
	}
	.recommend ul li>a>p img{
		width: 100px;
    height: 70px
	}
	.recommend-li{
		margin-left: 5px;
    text-align: left;
	}
  .item-text{
    margin:7px 0 10px 0;
    color: #aba9a9;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 166px
  }
  a{
    text-decoration: none;
  }
	.recommend-li p{
		color: #555;
		line-height: 24px;
		height: 24px;
		overflow: hidden;
	}
	.good-number img{
		width: 20px;
		vertical-align: middle;
		position: relative;
		top: -1px;
	}
	.good{
		margin-top: 4px;
		text-align: left;
		color: #999;
	}
	.about-blog{
		  background: #fff;
	    margin-left: 2%;
	    border: 1px solid #ddd;
	    border-radius: 2px;
	    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
	    box-shadow: 0 1px 1px rgba(0,0,0,.04);
	    margin-top: 14px
	}
	.about-blog>p{
		text-align: left;
	    background: #f8f8f8;
	    padding: 6px 10px;
	    border-bottom: 1px solid #ddd;
	    font-weight: bold;
	}
	.myBg img{
		width: 100%
	}
	.hot{
	    background: #fff;
	    margin-left: 2%;
	    border: 1px solid #ddd;
	    border-radius: 2px;
	    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
	    box-shadow: 0 1px 1px rgba(0,0,0,.04);
	    margin-top: 14px;
	}
	.hot>p{
		text-align: left;
	    background: #f8f8f8;
	    padding: 6px 10px;
	    border-bottom: 1px solid #ddd;
	    font-weight: bold;
	}
	li{
		list-style-type: none;
	}
	.hotNumber{
		background: #ccc;
	    font-size: 12px;
	    color: #fff;
	    line-height: 180%;
	    padding: 0 5px;
	    border-radius: 2px;
	    position: relative;
	    top: -11px
	}
	.hotText{
		display: inline-block;
		text-overflow: ellipsis;
		width: 250px;
		white-space: nowrap;
		overflow: hidden;
		text-align: left;
	}
	.hotUl li{
		height: 30px;
		line-height: 30px;
		margin-top: 4px;
	}
	.hotUl{
		padding: 10px 0;
	}
</style>
<script type="text/javascript">
    export default {
         data () {
              return {
                 id : '',
                 blogAriticleItem : []
              }
          },
          created() {
               this.recommend();
               // this.hot();
          },
          methods:{
               recommend(){
                  this.$http({
                       method: "get", 
                       url: this.url +'/articles/recommend',
                       data:{}
                  })
                   .then(res => {
                       if(res.data.code == 200){
                            this.blogAriticleItem = res.data.result;
                       }

                  })
               },
               hot(){
                   this.$http({
                       method: "get", 
                       url: this.url +'/articles/hot',
                       data:{}
                  })
                   .then(res => {
                       if(res.data.code == 200){
                            this.blogAriticleItem = res.data.result;
                       }
                  })
               }
         }
    }
</script>